<template>
	<view>
		<view class="nav2">
			<u-navbar title="挪车" bgColor="transparent" fixed @leftClick="leftBack">
			</u-navbar>
		</view>
		<view class="">
			<image src="https://hxs.dsjhs.com:553/prod-api/profile/ban.png" mode="widthFix" class="width100"></image>
		</view>
		<view class="ml30 mr30 form-box pore">
			<view class="bgFff p30 radius30">
				<view class="f28 c343">车牌号：</view>
				<u-gap height="10"></u-gap>
				<view class="bgF7 radiusBox p20">
					<u-input v-model="number" border="none" type="text" placeholder="请识别车牌号" disabled clearable>
						<!-- <view slot="prefix" class="flex">
							<text class="c343 mr10">鄂B</text>
							<u-line color="#999" length="30rpx" direction="col"></u-line>
						</view> -->
						<view slot="suffix">
							<u-icon name="scan" color="#34314F" size="26" @click="chooseImg"></u-icon>
						</view>
					</u-input>
				</view>
				<u-gap height="20"></u-gap>
				<view class="f28 c343">您的手机号码：</view>
				<u-gap height="10"></u-gap>
				<view class="bgF7 radiusBox p20">
					<u-input v-model="phone" border="none" type="number" placeholder="主要叫号码" clearable></u-input>
				</view>
				<u-gap height="10"></u-gap>
				<view class="f24 c999">
					注意：请在此处填写你的主叫号码。此处与主叫号码不一致将导致通话失败！
				</view>
			</view>
			<u-gap height="30"></u-gap>
			<view>
				<u-button shape="circle" color="#FFDE6D" @click="submitForm"
					:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D'}">
					一键呼叫（虚拟号码）
				</u-button>
			</view>
			<view class="textC mt60">
				目前已有<text class="f36 fw500 ml20 mr20">{{userNumber}}</text>用户呼叫挪车
			</view>
		</view>
		<!-- //购买须知 -->
		<u-popup :show="show_note" @close="show_note = false" @open="show_note = true" mode="center" round="20"
			:closeOnClickOverlay="false" :customStyle="{'width':'80%'}">
			<view class="p30">
				<view class="f28 c343 bold textC">{{note.protName}}</view>
				<u-gap height="20"></u-gap>
				<view class="f26 c343">
					<u-parse :content="note.protText"></u-parse>
				</view>
				<u-gap height="20"></u-gap>
				<view>
					<u-button :color="disabled?'#f7f7f7':'#FFDE6D'" :customStyle="{'color':'#34314F','height':'80rpx'}"
						shape="circle" @click="disabled?'':show_note = false">
						<view class="flex">
							<text class="mr10">同意</text>
							<view class="" v-if="disabled == true">
								<u-count-down :time="4000" format="ss" @change="timeChange"></u-count-down>
							</view>
						</view>
					</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getCallnumber,
		getCarnumber,
		getPhonebycar,
		getlogstats
	} from '@/common/api_car.js'
	import {
		getProtocolBycode
	} from '@/common/api_user.js'
	export default {
		name: '',
		data() {
			return {
				disabled: true,
				show_note: false,
				note: {},
				number: '', //鄂B5KB10
				phone: '',
				userNumber: 0
			}
		},
		onLoad(option) {
			this.getCarnnote()
			this.getlogstats()
			this.phone = this.userInfo.userPhone
		},
		methods: {
			async getlogstats() {
				let res = await getlogstats({
					type: 3
				})
				if (res.code == 200) {
					this.userNumber = res.data
				}
			},
			async getCarnnote() { //业务须知
				uni.showLoading({
					mask: true
				})
				const res = await getProtocolBycode({
					code: '10'
				})
				if (res.code == 200) {
					uni.hideLoading()
					this.note = res.data
					this.show_note = true
				}
			},
			timeChange(e) {
				const {
					seconds
				} = e
				if (seconds <= 0) {
					this.disabled = false
				}
			},
			chooseImg() {
				const that = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						let url = res.tempFilePaths[0]
						// #ifdef MP-WEIXIN
						uni.getFileSystemManager().readFile({
							filePath: url, //选择图片返回的相对路径
							encoding: 'base64', //编码格式
							success: res => { //成功的回调
								let base64 = 'data:image/jpeg;base64,' + res
									.data //不加上这串字符，在页面无法显示的哦
								console.log(base64);
								that.getCarnumber(base64)
							},
							fail: (e) => {
								console.log("图片转换失败");
							}
						})
						// #endif
						// #ifdef H5
						uni.request({
							url: url,
							method: 'GET',
							responseType: 'arraybuffer',
							success: ress => {
								let base64 = uni.arrayBufferToBase64(ress
									.data); //把arraybuffer转成base64
								base64 = 'data:image/jpeg;base64,' + base64;
								console.log(base64);
								that.getCarnumber(base64)
							},
							fail: (e) => {
								console.log("图片转换失败");
							}
						})
						// #endif

					}
				});
			},
			async getCarnumber(base64) {
				uni.showLoading({
					mask: true
				})
				const res = await getCarnumber({
					'imgBase64': base64
				})
				if (res.code == 200) {
					uni.hideLoading()
					this.number = res.data
				}
			},
			async submitForm() {
				if (!this.number) {
					uni.showToast({
						title: '请拍照识别车牌',
						icon: 'none'
					})
					return false
				}
				if (!this.phone) {
					uni.showToast({
						title: '请输入您的手机号码',
						icon: 'none'
					})
					return false
				}
				getCallnumber()
				uni.showLoading({
					mask: true
				})
				const res = await getPhonebycar({
					'jdchp': this.number
				})
				if (res.code == 200) {
					uni.hideLoading()
					this.maketel(res.msg)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}

	.form-box {
		margin-top: -80rpx;
	}

</style>